<template>
  <!-- 页面根容器 -->
  <div class="page-container">
    <el-menu :default-active="leftMenuActiveIndex" :ellipsis="false" @select="handleSelect" popper-class="left_menu">
      <el-menu-item index="1">我的乐谱</el-menu-item>
      <el-menu-item index="2">最近文件</el-menu-item>
    </el-menu>
    <div style="margin-top: 40px; margin-left: 15%"></div>
  </div>
</template>

<script setup>
// 组合式API setup语法
import { ref, onMounted } from 'vue';

const leftMenuActiveIndex = ref('1');
</script>

<style scoped>
/* 作用域样式 */
.page-container {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.left_menu {
  position: fixed;
  left: 0;
  top: 40px;
}
.el-menu--vertical {
  width: 15%;
  height: calc(100vh - 40px);
}
</style>
